import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list: JSON.parse(localStorage.getItem('list') || '[]'),
    isl: 'all'
  },
  mutations: {
    // 修改isl
    on (state) {
      state.isl = 'all'
    },
    // 修改isl
    tw (state) {
      state.isl = 'no'
    },
    // 修改isl
    th (state) {
      state.isl = 'yes'
    },
    // 清除已经完成返回一个没有没有完成的数据复制给state里面的list
    qing (state) {
      state.list = state.list.filter(item => item.isDone === false)
    },
    // 删除数据 接受荷载id
    shanchu (state, pay) {
      // 通过id找索引
      const index = state.list.findIndex(item => item.id === pay.id)
      state.list.splice(index, 1)
    },
    // 全选
    quanxuan (state, pay) {
      state.list.forEach(item => (item.isDone = pay.val))
    },
    // 绑定input小选框状态用他修改接受荷载里面id 和状态
    zh (state, pay) {
      // 通过id找索引
      const index = state.list.findIndex(item => item.id === pay.ia)
      // 确定索引把isDone状态换成传来的状态记住取反
      state.list[index].isDone = !pay.z
    },
    // 添加数据接受荷载传来的数据添加进list数组
    ac (state, pay) {
      state.list.push({
        id: pay.id,
        name: pay.name,
        isDone: pay.isDone
      })
    }

  },
  actions: {},
  getters: {
    // 判断用户点击是哪个返回新数组list,那边循环新数组渲染页面
    lis (state) {
      if (state.isl === 'all') {
        return state.list
      } else if (state.isl === 'yes') {
        return state.list.filter(item => item.isDone)
      } else if (state.isl === 'no') {
        return state.list.filter(item => item.isDone === false)
      }
    },
    // 拿到新数组的的长度做动态长度点那个变
    isAll (state, getters) {
      return getters.lis.length
    }
  }
})
